<template>
  <div class="container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" @click="openAdd = true">新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" border :data="tableData" style="color: black;">
      <el-table-column prop="id" sortable align="center" label="ID" width="80" />
      <el-table-column prop="name" align="center" label="部门名称" width="180" />
      <el-table-column prop="createTime" align="center" label="创建时间" width="200" />
      <el-table-column prop="updateTime" align="center" label="更新时间" width="200" />
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="text" size="mini" @click="handleDeleteDept(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑部门弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :lg="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增部门 -->
    <el-dialog :title="title" :visible.sync="openAdd" width="600px" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :lg="12">
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addDept, getDepts, deleteDept, updateDept } from '@/api/depts/depts'

export default {
  data() {
    return {
      tableData: [],
      // 加载中
      loading: false,
      // 弹窗
      open: false,
      openAdd: false,
      // 弹窗标题
      title: '',
      // 表单
      form: {
        name: '',
        id: undefined
      }
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    //  获取部门列表
    getDeptList() {
      this.loading = true
      getDepts().then((response) => {
        this.loading = false
        if (response.code == 20000) {
          this.tableData = response.data
        } else {
          this.$message.error(response.msg)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 修改部门
    handleUpdate(row) {
      this.title = '修改部门'
      this.open = true
      this.form.id = row.id
      this.form.name = row.name
    },
    // 提交表单
    submitForm() {
      if (this.form.id) {
        updateDept({
          id: this.form.id,
          name: this.form.name
        }).then((response) => {
          if (response.code === 20000) {
            this.$message.success('修改成功')
            this.getDeptList()
            this.cancel()
          } else {
            this.$message.error('修改失败')
          }
        })
      } else {
        addDept({
          name: this.form.name
        }).then((response) => {
          if (response.code === 20000) {
            this.$message.success('添加成功')
            this.getDeptList()
            this.cancel()
          } else {
            this.$message.error('添加失败')
          }
        })
      }
    },
    cancel() {
      this.open = false
      this.openAdd = false
      // this.reset()
    },
    // 删除部门
    handleDeleteDept(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => deleteDept(row.id)) // 调用删除接口
        .then((res) => {
          if (res.code === 20000) {
            this.$message.success('删除成功！')
            this.getDeptList()// 刷新列表
          } else {
            this.$message.error(res.message || '删除失败')
          }
        })
        .catch((error) => {
          if (error !== 'cancel') {
            this.$message.error('删除失败，请稍后重试')
          }
        })
    }
  }
  // 表单重置
  // resetForm(refName) {
  //   if (this.$refs[refName]) {
  //     this.$refs[refName].resetFields()
  //   }
  // },
  // // 表单重置
  // reset() {
  //   this.form = {
  //     id: undefined,
  //     name: undefined,
  //     createTime: undefined,
  //     updateTime: undefined
  //   }
  //   this.resetForm('form')
  // }
  // 提交表单

}

</script>
